<template>
    <div class="container">
        <div class="thbz" v-if="form.auditReason">{{ form.auditReason }}</div>
        <van-form @submit="onSubmit">
            <div class="qiye-info">
                <div class="title">单位信息</div>
                  <van-cell-group inset>
                     <van-field
                    v-model="form.uscc"
                    readonly
                    name="uscc"
                    label="信用代码："
                    />
                    <van-field
                    v-model="form.companyName"
                    readonly
                    name="companyName"
                    label="单位名称："
                    />
                    <van-field
                    v-model="form.legalPerson"
                    readonly
                    name="legalPerson"
                    label="法人代表："
                    /> 
                    
                    <van-field
                    v-model="companyStatusValue"
                    is-link
                    readonly
                    label="经营状态："
                    />

                     <van-field
                    v-model="companyTypeValue"
                    is-link
                    readonly
                    label="企业类型："
                    />

                    <van-field
                    v-model="companyIndustryValue"
                    is-link
                    readonly
                    label="所属行业："
                    />
  
                  <van-field
                    v-model="form.registeredCapital"
                    name="registeredCapital"
                    label="注册资本："
                    readonly
                    type="number"
                    >
                    <template #button>
                        <div size="small" type="primary">万元</div>
                      </template>
                    </van-field> 
                  </van-cell-group>
            </div>

            <div class="qiye-info2">
              <div class="title">联系人信息</div>
                <van-cell-group inset>
                <van-field
                  v-model="form.talent_company_apply_contact_info.name"
                  name="talent_company_apply_contact_info.name"
                  readonly
                  label="姓名："
                  /> 
                  <van-field
                  v-model="sexValue"
                  is-link
                  readonly
                  label="性别："
                  placeholder="请选择性别"
                  @click="showPicker4 = true"
                  required
                  :rules="[{ required: true, message: '请选择性别' }]"
                />
                <van-popup v-model:show="showPicker4" round position="bottom">
                  <van-picker
                    :columns="sexList"
                    @cancel="showPicker4 = false"
                    @confirm="onConfirm4"
                  />
                </van-popup> 

              <van-field
                  v-model="form.talent_company_apply_contact_info.phone"
                  name="talent_company_apply_contact_info.phone"
                  label="手机号："
                  placeholder="请输入手机号"
                  required
                  readonly
                  :rules="[{ required: true, message: '请输入手机号' }]"
                  />
                  <van-field
                  v-model="form.talent_company_apply_contact_info.job"
                  name="talent_company_apply_contact_info.job"
                  label="职务："
                  placeholder="请输入职务"
                  required
                  readonly
                  :rules="[{ required: true, message: '请输入职务' }]"
                  />
                  <van-field
                  v-model="form.talent_company_apply_contact_info.email"
                  name="talent_company_apply_contact_info.email"
                  label="电子邮箱："
                  placeholder="请输入电子邮箱"
                  required
                  :rules="[{ required: true, message: '请输入电子邮箱' }]"
                  /> 
                </van-cell-group> 
            </div>

            <div class="qiye-info2"  v-for="(item,index) in talent_company_apply_person_info" :key="index">
              <div class="talent-title">
                <div class="titleinfo">人才信息</div>
                <div class="deletebtn" v-if="index > 0" @click="del(index)">删除</div>
              </div>
              <van-cell-group inset>
                <van-field
                  v-model="item.idCard"
                  :name="`item[${index}].idCard`"
                  label="身份证号："
                  placeholder="请输入身份证号"
                  required
                  :rules="[{ required: true, message: '请输入身份证号' }]"
                  />
                  <van-field
                  v-model="item.name"
                  :name="`item[${index}].name`"
                  label="姓名："
                  placeholder="请输入姓名"
                  required
                  :rules="[{ required: true, message: '请输入姓名' }]"
                  />
                  <van-field
                  v-model="item.phone"
                  :name="`item[${index}].phone`"
                  label="手机号："
                  placeholder="请输入手机号"
                  required
                  :rules="[{ required: true, message: '请输入手机号' }]"
                  />
                  <van-field
                    v-model="item.job"
                    :name="`item[${index}].job`"
                    label="职务："
                    placeholder="请输入职务"
                    required
                    :rules="[{ required: true, message: '请输入职务' }]"
                    />

                   <van-field
                      v-model="item.jobNatureValue"
                      is-link
                      readonly
                      label="职位性质："
                      placeholder="请选择职位性质"
                      @click="showPickerZwxz = true"
                      required
                      :rules="[{ required: true, message: '请选择职位性质' }]"
                    />
                    <van-popup v-model:show="showPickerZwxz" round position="bottom">
                      <van-picker
                          :columns="jobNatureList"
                          @cancel="showPickerZwxz = false"
                          @confirm="onConfirmjobNature(index, $event)"
                      />
                    </van-popup> 

                   <van-field
                    v-model="item.xlValue"
                    is-link
                    readonly
                    label="学历："
                    placeholder="请选择学历"
                    @click="showPickerEdu = true"
                    required
                    :rules="[{ required: true, message: '请选择学历' }]"
                    />
                    <van-popup v-model:show="showPickerEdu" round position="bottom">
                      <van-picker
                          :columns="xlList"
                          @cancel="showPickerEdu = false"
                          @confirm="onConfirmEdu(index, $event)"
                      />
                    </van-popup>  

                    <!-- <div class="addapplybtn">
                      <van-button class="apply" type="primary" @click="addTanlentInfo">新增</van-button>
                    </div> -->
              </van-cell-group>
            </div>

            <div class="qiye-info3">
                <div class="title2">其他</div>
                <van-field
                class="remark"
                type="textarea"
                :rows="6"
                v-model="form.remark"
                name="remark"
                label=""
                placeholder="请输入"
                />
            </div>
            <!-- <div class="addbtn">
                <van-button color='#1052CC' block type="primary" native-type="submit">
                确定
                </van-button>
            </div> -->
        </van-form>

        <div class="approval-btn" v-if="form.auditStatusLabel == '未审核'">
        <div class="btn1" @click="handleApproved">通过</div>
        <div class="btn2" @click="handleRefuse">退回</div>
      </div>
      <van-dialog class="reasondia" v-model:show="showAuditReason" title="退回备注" show-cancel-button @confirm="dialogConfirm">
        <van-field
        style="margin-bottom: 2rem;"
        class="remark"
        type="textarea"
        :rows="6"
        v-model="auditReason"
        label=""
        placeholder=""
        />
      </van-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref,reactive,onMounted,computed } from 'vue';
  import { useRouter,useRoute } from 'vue-router';
  import { showToast } from 'vant';
  import { getDictSelect, getOrigin,getTalentCompanyApplyInfo,approveCompanyApply } from '@/api/company';
  
  const router = useRouter()
  const route = useRoute();

  async function getThDetail() {
  const id = route.query.id || '';
  console.log('applyId:',id);
  if(id){
    const { code, data } = await getTalentCompanyApplyInfo(id);
    if(code === 200) {
    form.uscc = data.uscc
    form.companyName = data.companyName
    form.legalPerson = data.legalPerson
    form.companyStatus = data.companyStatus
    companyStatusValue.value = data.companyStatusLabel
    companyTypeValue.value = data.companyTypeLabel
    form.companyType = data.companyType
    companyTypeValue.value = data.companyTypeLabel
    form.companyType = data.companyType
    companyIndustryValue.value = data.companyTypeLabel
    form.companyIndustry = data.companyIndustry
    form.registeredCapital = data.registeredCapital
    // form.talent_company_apply_contact_info.value = form.talent_company_apply_contact_info
    form.talent_company_apply_contact_info.name = data.talent_company_apply_contact_info.name
    form.talent_company_apply_contact_info.sex = data.talent_company_apply_contact_info.sex
    let picksex = []
    picksex = sexList.filter(s =>{
      return s.value == data.talent_company_apply_contact_info.sex
    })
    sexValue.value = picksex[0].text
    form.talent_company_apply_contact_info.phone = data.talent_company_apply_contact_info.phone
    form.talent_company_apply_contact_info.job = data.talent_company_apply_contact_info.job
    form.talent_company_apply_contact_info.email = data.talent_company_apply_contact_info.email

    form.talent_company_apply_person_info = JSON.parse(JSON.stringify(talent_company_apply_person_info.value))
    
    }
  }
}

//通过审核
const params1 = {
    applyId: route.query.applyId,
    auditStatus: '1'
}
const handleApproved = async ()=> {
  const { code,msg } = await approveCompanyApply(params1);
    if (code === 200) {
      showToast(msg)
      router.push({ path: '/Approval', query: { status: '0' }})
    }
}

//退回审核

const showAuditReason = ref(false);
const auditReason = ref('')
const handleRefuse = async ()=> {
  showAuditReason.value = true
}
const dialogConfirm = async()=>{
  console.log('showAuditReason:',auditReason.value);
  const { code, msg } = await approveCompanyApply({
    applyId: route.query.applyId,
    auditStatus: '2',
    auditReason: auditReason.value
  });
    if (code === 200) {
      showToast(msg)
      router.push({ path: '/Approval', query: { status: '0' }})
    }
}

  
  const companyStatusList = [];
  const getCompanyStatusList = () => {
  getDictSelect('talent_company_status').then(res => {
    const {code,data} = res
    if(code === 200){
        data.forEach(item=>{
          companyStatusList.push({
            text: item.fullName,
            value: item.enCode
        })
        console.log('companyStatusList:',companyStatusList);
      })
    }
  })
  }
  const showPicker1 = ref(false);
  const companyStatusId = ref('')
  const companyStatusValue = ref('')
  const onConfirm1 = ({ selectedOptions }) => {
    showPicker1.value = false;
    companyStatusValue.value = selectedOptions[0]?.text;
    companyStatusId.value = selectedOptions[0]?.value;
  };

  const companyTypeList = [];
  const getCompanyTypeList = () => {
  getDictSelect('talent_company_type').then(res => {
    const {code,data} = res
    if(code === 200){
        data.forEach(item=>{
          companyTypeList.push({
            text: item.fullName,
            value: item.enCode
        })
        console.log('companyTypeList:',companyTypeList);
      })
    }
  })
  }
  const showPicker3 = ref(false);
  const companyIndustryId = ref('')
  const companyIndustryValue = ref('')
  const onConfirm3 = ({ selectedOptions }) => {
    showPicker3.value = false;
    companyIndustryValue.value = selectedOptions[0]?.text;
    companyIndustryId.value = selectedOptions[0]?.value;
  };

  const companyIndustryList = [];
  const getCompanyIndustryList = () => {
  getDictSelect('talent_company_profession').then(res => {
    const {code,data} = res
    if(code === 200){
        data.forEach(item=>{
          companyIndustryList.push({
            text: item.fullName,
            value: item.enCode
        })
        console.log('companyIndustryList:',companyIndustryList);
      })
    }
  })
  }
  const showPicker2 = ref(false);
  const companyTypeId = ref('')
  const companyTypeValue = ref('')
  const onConfirm2 = ({ selectedOptions }) => {
    showPicker2.value = false;
    companyTypeValue.value = selectedOptions[0]?.text;
    companyTypeId.value = selectedOptions[0]?.value;
  };

  const sexList = [];
  const getSexList = () => {
  getDictSelect('sex').then(res => {
    const {code,data} = res
    if(code === 200){
        data.forEach(item=>{
        sexList.push({
          text: item.fullName,
          value: item.enCode
        })
      })
    }
  })
  }
  const showPicker4 = ref(false);
  const sexId = ref('')
  const sexValue = ref('')
  const onConfirm4 = ({ selectedOptions }) => {
    showPicker4.value = false;
    sexValue.value = selectedOptions[0]?.text;
    sexId.value = selectedOptions[0]?.value;
  };


  //职位性质
  const jobNatureList = [];
const getjobNatureList = () => {
getDictSelect('talent_person_job_nature').then(res => {
  const {code,data} = res
  if(code === 200){
      data.forEach(item=>{
        jobNatureList.push({
        text: item.fullName,
        value: item.enCode
      })
    })
  }
})
}
const showPickerZwxz = ref(false);
const onConfirmjobNature = (index,{selectedOptions}) => {
  console.log('index:',index);
  console.log('selectedOptions:',selectedOptions);
  showPickerZwxz.value = false;
  talent_company_apply_person_info.value[index].jobNatureValue = selectedOptions[0]?.text;
  talent_company_apply_person_info.value[index].jobNature = selectedOptions[0]?.value;
};

const xlList = [];
const getXlList = () => {
getDictSelect('talent_person_edu').then(res => {
  const {code,data} = res
  if(code === 200){
      data.forEach(item=>{
      xlList.push({
        text: item.fullName,
        value: item.enCode
      })
    })
  }
})
}
const showPickerEdu = ref(false);
const onConfirmEdu = (index,{ selectedOptions }) => {
  showPickerEdu.value = false;
  talent_company_apply_person_info.value[index].xlValue = selectedOptions[0]?.text;
  talent_company_apply_person_info.value[index].eduBackground = selectedOptions[0]?.value;
};
  
  const form = reactive({
    uscc: '',
    companyName: '',
    legalPerson: '',
    companyType: '',
    registeredCapital: '',
    remark: '',
    talent_company_apply_contact_info: {
        name: '',
        sex: '',
        phone: '',
        job: '',
        email: '',
    },
    talent_company_apply_person_info: [{
      idCard: '',
      name: '',
      phone: '',
      job: '',
    }]
  })

const talent_company_apply_person_info = ref([{
  idCard: '',
  name: '',
  phone: '',
  job: '',
}]);

  const addTanlentInfo = () =>{
  talent_company_apply_person_info.value.push({
    idCard: '',
    name: '',
    phone: '',
    job: '',
  })
}

// 删除
const del = (index) => {
  talent_company_apply_person_info.value.splice(index,1)
}

  const formSubmit = () => {
    let { uscc,companyName,legalPerson,registeredCapital,remark } = form;
    const params = {
      uscc,
      companyName,
      legalPerson,
      remark,
      companyStatus: companyStatusId.value,
      companyType: companyTypeId.value,
      companyIndustry: companyIndustryId.value,
      registeredCapital,
      talent_company_apply_contact_info: {
        name: form.talent_company_apply_contact_info.name,
        sex: sexId.value,
        phone: form.talent_company_apply_contact_info.phone,
        job: form.talent_company_apply_contact_info.job,
        email: form.talent_company_apply_contact_info.email
      },
      talent_company_apply_person_info: JSON.parse(JSON.stringify(talent_company_apply_person_info.value))
  }
  
  console.log('params11111:',params);


  companyApply(params).then((res) => {
    console.log('companyApply:',res);
    const {code,data} = res
    if (code === 200) {
      console.log('');
      // localStorage.setItem('personId', data.personInfo.personId)
    } else {
      showToast(res.msg)
    }
  }).catch((err) => {
      console.log(err)
    })
   }
  
  const onSubmit = (values) => {
    console.log('values:',values);
    formSubmit()
  }
  
  onMounted(() => {
    getCompanyStatusList()
    getCompanyTypeList()
    getCompanyIndustryList()
    getSexList()
    getjobNatureList()
    getXlList()

    setTimeout(()=>{
      getThDetail()
    },1000)
  })
  </script>
  
  <style lang="scss" scoped>
  .container {
  background: #f9f9f9;
  overflow: hidden;
  margin-bottom: 6.6rem;
  padding: 0.9rem 1.3rem;
  }
  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
  }
  .addbtn{
    position: fixed;
    bottom: 2rem;
    width: 92%;
    left: 4%;
  }
  .van-form{
    padding: 1.4rem 0 0 0;
  }
  .van-cell-group{
    background: #fff;
  }
  .van-field{
    border-bottom: 1px solid #E0E0E4;
    padding: 2rem 0 1.6rem;
  }
  .title{
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1.5rem 1.2rem;
  }
  .qiye-info,.qiye-info2,.qiye-info3{
    background: #fff;
    padding-top: 1.2rem;
  }
  .qiye-info2{
    margin: 2rem 0;
    position: relative;
  }
  .qiye-info3{
    padding: 1.2rem;
    
  }
  .title2{
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;

  }
  .dialog-qiye-info2{
    background: #fff;
    padding-top: 1.5rem;
  }
  .dialog-title{
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0 1.2rem;
  }
  .qita{
    margin-top: 2rem;
    padding: 1.2rem;
    background: #fff;
    margin-bottom: 2.6rem;
  }
  .title2{
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
  }
  .title3{
    font-size: 1.4rem;
    font-weight: 400;
    margin: 2rem 0 1.6rem 0;
  }
  .remark{
    border: 1px solid #E0E0E4;
    padding: 0.4rem 1rem!important;
    margin-bottom: 1.6rem;
  }
  ::v-deep .van-field__label{
    width: 10rem!important;
  }
  
  .van-button{
    font-size: 1.8rem;
    font-weight: 400;
  }
  .van-cell{
    border-bottom: 1px solid #E0E0E4;
    padding: 2rem 0 1.6rem;
  }
  ::v-deep .qiye-info .van-cell__title{
    width: 10rem !important;
    flex: none;
    margin-right: 1.2rem;
  }
  ::v-deep .van-field__label {
    font-size: 1.3rem;
  }
  
  ::v-deep .van-cell__title{
    width: 12rem !important;
    flex: none;
    margin-right: 1.2rem;
  }
  ::v-deep .van-cell__value{
    text-align: left;
    color: #323233;
    font-size: 1.3rem;
  }
  .add{
    width: 16%;
    height: 2.6rem;
    line-height: 2.5rem;
    margin: 0 auto;
    text-align: center;
    font-size: 2.2rem;
    position: absolute;
    bottom: -2.6rem;
    background: #fff;
    left: 42%;
  }
  .addapplybtn{
    text-align: center;
    margin: 2rem 0;
  }
  .apply{
    width: 8rem;
    height: 3.8rem;
    font-size: 1.6rem;
  }
  .talent-title{
    // font-size: 1.8rem;
    // font-weight: 700;
    margin: 0 1.2rem 1.5rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .titleinfo{
    font-size: 1.8rem;
    font-weight: 700;

  }
  .deletebtn{
    font-size: 1.6rem;
    font-weight: 400;
    color: red;

  }


  
.approval-btn{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 0 0;
  position: fixed;
  bottom: 2rem;
  left: 0;
  width: 100%;
  height: 4.5rem;

  .btn1{
    width: 40%;
    height: 4.5rem;
    line-height: 4.5rem;
    text-align: center;
    background: #1052CC;
    font-size: 1.8rem;
    font-weight: 400;
    color: #fff;
    border: 1px solid #1052CC;
    left: 5%;
    position: absolute;
    bottom: 0;
  }
  .btn2{
    width: 40%;
    height: 4.5rem;
    line-height: 4.5rem;
    text-align: center;
    background: #fff;
    font-size: 1.8rem;
    font-weight: 400;
    color: #333333;
    border: 1px solid #1052CC;
    right: 5%;
    position: absolute;
    bottom: 0;
  }
}
::v-deep .van-dialog__header{
  margin: 1rem;
  text-align: left;
  padding-top: 0;
}

::v-deep .van-dialog{
  width: 100%;
  padding: 1rem;
  background: #fff!important;
}

.thbz{
  border-radius: 5px;
  background: #F2F6FF;
  padding: 1.2rem 1.8rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: #333333;
  margin-bottom: 1.6rem;
  line-height: 2rem;
}

  </style>